<template>
  <div
    class="fa-widget-placeholder"
    :class="[{ 'is-vertical': vertical, 'is-horizontal': !vertical }, `fa-widget-placeholder--${size}`]"
    :title="displayText"
  >
    <i class="fa-widget-placeholder__icon" :class="icon || data.option.icon"></i>

    <div class="fa-widget-placeholder__text">{{ displayText }}</div>

    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { Widget } from '@/models'

type IconSize = '' | 'small' | 'medium' | 'large'

/** 控件默认占位 */
export default defineComponent({
  name: 'FaWidgetPlaceholder',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否纵向 */
    vertical: {
      type: Boolean,
      default: false
    },

    /** 图标 */
    icon: {
      type: String,
      default: ''
    },

    /** 图标尺寸 'small', 'medium', 'large' */
    iconSize: {
      type: String as PropType<IconSize>,
      default: ''
    },

    /** 文本 */
    text: {
      type: String,
      default: ''
    }
  },

  setup(props) {
    return {
      /** 计算的图标尺寸 */
      size: computed(() => {
        if (props.iconSize) return props.iconSize

        if (!props.vertical) return 'small'

        const { displayWidth: w, h } = props.data

        // 垂直展示时，根据控件高度适应图标尺寸
        return (h > 80 && w > 80 && 'large') || (h > 50 && w > 50 && 'medium') || 'small'
      }),

      /** 文本 */
      displayText: computed(() => props.text || props.data.option.name)
    }
  }
})
</script>

<style lang="scss">
/** 控件默认占位 */
.fa-widget-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 12px;
  color: #676b6f;
  user-select: none;

  &__icon {
    font-size: 16px;
    line-height: 1;
    transition: font-size 0.25s ease-in-out;
  }

  &--large &__icon {
    font-size: 30px;
  }

  &--medium &__icon {
    font-size: 20px;
  }

  &__text {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 12px;
    @include text-ellipsis;
  }

  &--small.is-vertical &__text {
    display: none;
  }

  // 水平展示
  &.is-horizontal {
    .fa-widget-placeholder {
      &__text {
        margin-left: 8px;
      }
    }
  }

  // 垂直展示
  &.is-vertical {
    flex-direction: column;

    .fa-widget-placeholder {
      &__text {
        margin-top: 6px;
      }
    }
  }
}
</style>
